import React, { Component } from 'react';
import { Dispatch } from 'redux';

import { Form } from '@ant-design/compatible';
import { FormComponentProps } from '@ant-design/compatible/es/form';

import {
  InputNumber, Modal, Row, Col,
} from 'antd';
import '@ant-design/compatible/assets/index.css';

interface ReactProps extends FormComponentProps {
  dispatch?: Dispatch;
  resetVisible: boolean;
  resetRow: any;
  resetType: number;
  resetNumber: (resetVisible: boolean) => void;
}

class ResetNumberInfo extends Component<ReactProps> {
  handleSubmitResetNumber = () => {
    const { form: { validateFields } } = this.props;
    validateFields((errors: any, values: any) => {
      if (errors) return;

      const {
        resetRow,
        resetType,
      } = this.props;
      const payload = {
        shelfId: resetRow.id,
        type: resetType,
        ...values,
      };

      const { dispatch }: any = this.props;
      dispatch({
        type: 'shelvesToHeapList/clearPkgNumber',
        payload,
      });

      const { resetNumber } = this.props;
      resetNumber(false);
    });
  }

  render() {
    const {
      form: { getFieldDecorator },
      resetVisible,
      resetRow,
      resetNumber,
    } = this.props;
    return (
      <Modal
        title="确认提示"
        visible={resetVisible}
        destroyOnClose
        onOk={this.handleSubmitResetNumber}
        onCancel={() => resetNumber(false)}
      >
        <p>确认重置当前货架/地堆的包裹编号？</p>
        {!resetRow.type && (
          <Form className="tableListForm marginT20">
            <Row
              gutter={{ md: 8, xl: 24, lg: 48 }}
              justify="center"
            >
              <Col md={16} sm={24}>
                <Form.Item style={{ marginBottom: 0 }}>
                  {getFieldDecorator('len', {
                    rules: [{ required: true, message: '请输入最大包裹编号' }],
                  })(
                    <InputNumber
                      step={1}
                      min={0}
                      precision={0}
                      placeholder="最大包裹编号"
                      style={{ width: '100%' }}
                    />,
                  )}
                </Form.Item>
              </Col>
            </Row>
          </Form>
        )}
      </Modal>
    );
  }
}

export default Form.create<ReactProps>()(ResetNumberInfo);
